************************************************ CCS CODE ************************************************ *, *:before, *:after{ box-sizing: border-box; padding: 0; margin: 0; } body{ background-color: #fcfcfc; } button{ height: 100px; width: 320px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px; outline: none; box-shadow: 20px 20px 30px rgba(0,0,0,0.1); background-color: transparent; border: none; overflow: hidden; } button:before{ content: "AWESOME"; position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-family: 'Poppins',sans-serif; font-size: 25px; letter-spacing: 6px; font-weight: 700; padding: 32px 0; color: #fcfcfc; background-color: rgba(255,255,255,0.06); backdrop-filter: blur(25px); cursor: pointer; } button:after{ content: ""; height: 500px; width: 500px; position: absolute; left: -90px; top: -200px; z-index: -1; background-image: conic-gradient( #ff2e4e, #d960ff, #9264ff, #00b3f9, #06cd69, #ffcd00, #ff5c22, #ff2e4e ); } button:hover:after{ animation: spin 3s linear infinite; } @keyframes spin{ 100%{ transform: rotate(360deg); } }